<template>
    <el-card>
        <el-tabs v-model="activeName" @tab-click="changeTab">
            <el-tab-pane label="结算概况" name="operationList">
                <el-form ref="CustomerForm" :inline="true" :model="CustomerForm" class="tpl-form-inline pb0">
                    <el-form-item label="时间">
                        <el-select v-model="monthValue" @change="selectMonth">
                            <el-option v-for="item in monthData" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="mt10 mb20">
                        <el-button type="primary" icon="el-icon-search" @click="queryList" :disabled="loading">查询</el-button>
                        <el-button @click="reset" icon="el-icon-refresh" :disabled="loading">重置</el-button>
                        <el-button type="primary" icon="el-icon-download" @click="exportFile" >导出</el-button>
                    </div>
                </el-form>
                <el-table class="sd" stripe border :data="tableData" v-loading="loading">
                    <el-table-column align="center" prop="date" label="时间"></el-table-column>
                    <el-table-column align="center" prop="nums" label="保单数"></el-table-column>
                    <el-table-column align="center" prop="bouns" label="奖励金结算单价"></el-table-column>
                    <el-table-column align="center" prop="totalC" label="渠道结算费率"></el-table-column>
                    <el-table-column align="center" prop="telServiceC" label="技术服务费率"></el-table-column>
                    <template v-for="(item, index) in cols">
                        <el-table-column :label="item.label" :key="index" :prop="item.prop"></el-table-column>
                    </template>
                    <el-table-column align="center" prop="resultNums" label="结算金额"></el-table-column>
                </el-table>
                <el-pagination class="tpl-mg-t mt20 fr"
                               small
                               @size-change="pageSizeChange"
                               @current-change="pageCurrentChange"
                               :current-page="queryForm.pageNum"
                               :page-sizes="[10, 20, 30, 40, 50, 100]"
                               :page-size="queryForm.pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total"
                                style="margin-bottom: 5px">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="结算明细" name="operationDate">
                <el-form ref="CustomerForm2" :inline="true" :model="CustomerForm2" class="tpl-form-inline pb0">
                    <el-form-item label="时间">
                        <el-date-picker v-model="CustomerForm2.birthday" type="daterange" range-separator="~" format="yyyy 年 MM 月 dd 日" :picker-options="pickerOptions"
                            start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                    </el-form-item>
                </el-form>
                <div class="mt10 mb20">
                    <el-button type="primary" icon="el-icon-search" @click="queryList" :disabled="loading">查询</el-button>
                    <el-button @click="reset" icon="el-icon-refresh" :disabled="loading">重置</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="exportFile" >导出</el-button>
                </div>
                <el-table class="sd" stripe border :data="tableData2" v-loading="loading">
                    <el-table-column align="center" prop="index" label="序号" width="100"></el-table-column>
                    <el-table-column align="center" prop="no" label="保单号"></el-table-column>
                    <el-table-column align="center" prop="insurance" label="保司"></el-table-column>
                    <el-table-column align="center" prop="depot" label="车厂"></el-table-column>
                    <el-table-column align="center" prop="status" label="保险状态"></el-table-column>
                    <el-table-column align="center" prop="vCode" label="车辆VIN码"></el-table-column>
                     <el-table-column align="center" prop="bonus" label="车主奖励金"></el-table-column>
                    <el-table-column align="center" prop="channel" label="渠道服务费"></el-table-column>
                    <el-table-column align="center" prop="telService" label="技术服务费"></el-table-column>
                    <template v-for="(item, index) in cols">
                        <el-table-column :label="item.label" :key="index" :prop="item.prop"></el-table-column>
                    </template>
                    <el-table-column align="center" prop="resultNums" label="结算金额"></el-table-column>
                </el-table>
                <el-pagination class="tpl-mg-t mt20 fr"
                               small
                               @size-change="pageSizeChange"
                               @current-change="pageCurrentChange"
                               :current-page="queryForm.pageNum"
                               :page-sizes="[10, 20, 30, 40, 50, 100]"
                               :page-size="queryForm.pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total2"
                                style="margin-bottom: 5px">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<script>
    export default {
        name: 'settlementInfo',
        data () {
            return {
                // tab页标签
                activeName: 'operationList',
                // 列表查询条件
                queryForm: {
                    pageNum: 1,
                    pageSize: 10
                },
                 // 查询表单
                CustomerForm: {
                    bsType: [],
                    zjType: [],
                    pageNum: 1,
                    pageSize: 10
                },
                CustomerForm2: {
                    birthday: '',
                    bsType: [],
                    zjType: [],
                    pageNum: 1,
                    pageSize: 10
                },
                // total: 0,
                tableData: [],
                tableData2: [],
                cols: [],
                monthData: [
                    "2020年1月", 
                    "2020年2月", 
                    "2020年3月", 
                    "2020年4月", 
                    "2020年5月", 
                    "2020年6月", 
                    "2020年7月", 
                    "2020年8月", 
                    "2020年9月", 
                    "2020年10月", 
                    "2020年11月", 
                    "2020年12月" ],
                monthValue: '2020年1月',
                loading: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick (picker) {
                            const start = new Date()
                            picker.$emit('pick', [start, start])
                        }
                    }]
                },
            }
        },
        created () {
        },
        mounted (){
            this.$nextTick(()=>{
                this.queryList();this.addColByStorage();
            })
        },
        computed: {
            total() {
                return this.tableData.length;
            },
            total2() {
                return this.tableData2.length;
            }
        },
        methods: {
            handleEdit (i,r) {
                this.$routerTo('settlementDetail');
            },
            addColByStorage(){
                this.getColsByStorangeTb = JSON.parse(localStorage.getItem('settlementData'));
                if(!this.getColsByStorangeTb) return;
                let v1 = this.getColsByStorangeTb[0].spareField2;
                let v2 = this.getColsByStorangeTb[0].spareField4;
                let v3 = this.getColsByStorangeTb[0].spareField6;
                if(v1 && v1 != ""){
                    const v = this.getColsByStorangeTb[0].spareField1;
                    const v2 = this.getColsByStorangeTb[0].spareField2;
                    this.tableData.forEach(item => {
                        item.spareField1 = v; item.spareField2 = v2;
                    });
                    this.cols.push({prop: 'spareField2', label: v});
                }
                if(v2 && v2 != ""){
                    const v = this.getColsByStorangeTb[0].spareField3;
                    const v2 = this.getColsByStorangeTb[0].spareField4;
                    this.tableData.forEach(item => {
                        item.spareField3 = v; item.spareField4 = v2;
                    });
                    this.cols.push({prop: 'spareField4', label: v});
                }
                if(v3 && v3 != ""){
                    const v = this.getColsByStorangeTb[0].spareField5;
                    const v2 = this.getColsByStorangeTb[0].spareField6;
                    this.tableData.forEach(item => {
                        item.spareField5 = v; item.spareField6 = v2;
                    });
                    this.cols.push({prop: 'spareField6', label: v});
                }
            },
            // 查询列表
            queryList () {
                let cData = [], cData2 = [];
                    cData = [
                        {"index": "1","date": "2020年6月","bouns": "500","totalC":"10%","telServiceC":"5%","nums": "23125","resultNums": "¥23125"},
                        {"index": "2","date": "2020年5月","bouns": "500","totalC":"10%","telServiceC":"5%","nums": "17252","resultNums": "¥17252"},
                        {"index": "3","date": "2020年4月","bouns": "500","totalC":"10%","telServiceC":"5%","nums": "14658","resultNums": "¥14658"},
                        {"index": "4","date": "2020年3月","bouns": "500","totalC":"10%","telServiceC":"5%","nums": "22648","resultNums": "¥22648"}
                    ];
                    cData2 = [
                        {"index": "1","no": "263994483758472","insurance": "阳光保险","depot": "吉利汽车","date": "2020年4月2日","status": "待起保","xbStatus": "无","vCode": "LVSHJXXXXXX384344","resultNums": "0元","bonus": "0元","telService": "0元","channel": "0元"},
                        {"index": "2","no": "263994483758472","insurance": "中国平安保险","depot": "吉利汽车","date": "2020年4月2日","status": "保障中","xbStatus": "一年","vCode": "LVSHJXXXXXX384344","resultNums": "1000元","bonus": "500元","telService": "500元","channel": "0元"},
                        {"index": "3","no": "263994483758472","insurance": "太平洋保险","depot": "吉利汽车","date": "2020年4月2日","status": "已脱保","xbStatus": "两年","vCode": "LVSHJXXXXXX384344","resultNums": "1000元","bonus": "500元","telService": "500元","channel": "0元"},
                        {"index": "4","no": "263994483758472","insurance": "中国人保","depot": "吉利汽车","date": "2020年4月2日","status": "待起保","xbStatus": "三年","vCode": "LVSHJXXXXXX384344","resultNums": "0元","bonus": "0元","telService": "0元","channel": "0元"},
                    ];
                this.tableData = cData;
                this.tableData2 = cData2;
            },
            // tab页转换
            changeTab (tab) {
                if (tab.name === 'operationDate') {
                    // this.$refs.schedule.getActivitySchedule()
                } else {
                    // this.getBaseDataList()
                }
            },
            reset () {
                this.queryForm.pageNum = 1
                this.queryForm.pageSize = 10
                this.queryList()
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.queryForm.pageSize = val
                if (this.queryForm.pageNum > pages) {
                    this.queryForm.pageNum = 1
                }
                this.queryList()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.queryForm.pageNum = val
                this.queryList()
            },
            exportFile () {
                if(this.CustomerForm.birthday[0] || this.CustomerForm.vCode != "" || this.CustomerForm.bsType !== "" || this.CustomerForm.bxType !== "" || this.CustomerForm.zjType !== ""){
                    this.$message({ type: 'success', message: `导出成功!` })
                }else{
                    this.$message.warning('请先选择筛选条件！')
                }
            },
            selectMonth() {}
        }
    }
</script>

<style scoped>

</style>
